<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ecommerce Recommendation System</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<style>
     body {
            background-color: #f8f9fa;
        }
        .navbar {
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }
        .container {
            margin-top: 50px;
        }
        .video-background {
            width: 100%;
            height: 400px; /* Set the height of the video here */
            object-fit: cover; /* Ensure the video covers the entire container */
        }
        .nav-link:hover {
            color: orange !important; /* Change text color on hover */
        }
        .nav-link.btn {
            border-radius: 5px; /* Add rounded corners to buttons */
        }

        .modal-content {
            background-color: #fff; /* Set modal content background color */
            color: #000; /* Set modal content text color */
        }
        .modal-content.dark {
            background-color: #000; /* Set modal content background color for dark theme */
            color: #fff; /* Set modal content text color for dark theme */
        }
</style>
<body>




<!--trending recommendations-->
<!-- Products -->
<div class="container mt-5">
  <h2 class="text-center mb-4">Cart Products</h2>
  <div class="row mt-4">
    {% for index, product in trending_products.iterrows() %}
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div class="card">
          <img src="{{ random_product_image_urls[index] }}" class="card-img-top" alt="{{ product['Name'] }}" style="height: 200px;">
        <div class="card-body">
          <h5 class="card-title">{{ truncate(product['Name'],12) }}</h5>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#productModal{{ index }}">Buy Now</button>
        </div>
      </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="productModal{{ index }}" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="productModalLabel">{{ product['Name'] }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-4">
                  <img src="{{ random_product_image_urls[index] }}" class="img-fluid" alt="{{ product['Name'] }}" style="height: 200px;">
              </div>
              <div class="col-md-8">
                
                <!-- Add other product details here -->
                <!-- Example: -->
                <p><strong>Rating:</strong> {{ product['rating'] }}</p>
                
                <!-- Add more details as needed -->
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
  // Handle click on Settings link to open the modal
  document.getElementById('settingsLink').addEventListener('click', function() {
    $('#settingsModal').modal('show');
  });

  // Handle theme apply button click
  document.getElementById('applyTheme').addEventListener('click', function() {
    // Get the selected theme value
    var selectedTheme = document.querySelector('input[name="theme"]:checked').value;

    // Apply the selected theme
    if (selectedTheme === 'black') {
      document.body.style.backgroundColor = 'black';
      document.body.style.color = 'white';
    } else if (selectedTheme === 'green') {
      document.body.style.backgroundColor = 'green';
      document.body.style.color = 'white';
    } else {
      // Default theme
      document.body.style.backgroundColor = '#f8f9fa';
      document.body.style.color = 'black';
    }

    // Close the modal
    $('#settingsModal').modal('hide');
  });